<script>
import KtMap from "/src/components/common/KtMap.vue";
import MapSelectDialog from "/src/views/manage/iot/project/components/MapSelectDialog.vue";

export default {
  components: {MapSelectDialog, KtMap},

  data() {
    return {
      show: true,
      loading: false,
      bodyData: [],
      areaList: [],
      requestParam: {
        visaGoodsId: "",
        prices: [{
          servicePrice: 100,
          visaPrice: 100
        }]
      }
    }
  },
  mounted() {

  },
  methods: {
    open(visaGoodsId) {
      this.requestParam.visaGoodsId = visaGoodsId;
      this.requestGetAll();
      this.getBodyData();
      this.show = true;
    },
    close() {
      this.show = false;
    },
    add() {
      this.requestParam.prices.push({
        visaGoodsId: this.requestParam.visaGoodsId,
        servicePrice: "",
        visaPrice: ""
      });
    },
    toRemove(index) {
      this.requestParam.prices.splice(index, 1);
    },
    toSave() {
      this.$kt.request.send({
        uri: "/bus-visa-web/admin/visaGoodsPrice/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success(this.$i18n.zhToGlobal("保存成功"));
          this.close();
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
    // /tool-area-web/admin/toolStateArea/getAll
    requestGetAll() {
      this.$kt.request.send({
        uri: "/tool-area-web/admin/toolStateArea/getAll",
        data: {},
        stateSuccess: (res) => {
          this.areaList = res.data;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
    getBodyData() {
      this.$kt.request.send({
        uri: "/bus-visa-web/admin/visaGoodsPrice/getByVisaGoodsId",
        data: {
          visaGoodsId: this.requestParam.visaGoodsId
        },
        stateSuccess: (res) => {
          this.bodyData = res.data;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    }
  }
}
</script>

<template>

  <el-dialog
      draggable
      width="600px"
      v-model="show"
      :title="$i18n.zhToGlobal('保存')"
      @close="close">
    <el-scrollbar style="height: calc(100vh - 150px);width: 100%;">
      <div class="box">
        <div
            v-for="(item,index) in requestParam.prices"
            class="card">
          <div>

            <el-form
                label-position="top">
              <el-row gutter="20">
                <el-col :span="8">

                  <el-form-item
                      v-if="areaList.length>0"
                      :label="$i18n.zhToGlobal('签证人国籍或地区')">
                    <el-select v-model="item.areaCode" placeholder="请选择">
                      <el-option v-for="item in areaList" :key="item.code" :label="item.name"
                                 :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$i18n.zhToGlobal('服务费')">
                    <el-input
                        v-model="item.servicePrice"
                    >
                      <template #prefix>
                        <span style="color: #999">￥</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$i18n.zhToGlobal('签证费')">
                    <el-input
                        v-model="item.visaPrice"
                    >
                      <template #prefix>
                        <span style="color: #999">￥</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div style="text-align: right">
            <el-button
                @click="toRemove(index)"
                type="danger"
                size="small">
              <kt-icon icon="el-icon-delete" color="#fff"></kt-icon>
            </el-button>
          </div>
        </div>


      </div>
    </el-scrollbar>
    <div style="text-align: right">
      <el-button
          @click="add()"
      >
        <kt-icon icon="el-icon-plus" color="#000"></kt-icon>
      </el-button>
      <el-button
          @click="toSave"
          type="primary">
        确定
      </el-button>
    </div>

  </el-dialog>

</template>

<style scoped lang="scss">
.box {
  // 超出不显示
  overflow: hidden;
}

.gen-btn {
  cursor: pointer;
}

.gen-btn:hover {
  transform: scale(1.1);
}

.gen-btn:active {
  transform: scale(1);
}


.icon-box {
  width: 300px;
  height: 200px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: inline-block;
  position: relative;

  .icon-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .icon-edit {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
  }

  .icon-edit:hover {
    background-color: rgba(0, 0, 0, .5);
  }

  .icon-edit:active {
    background-color: rgba(0, 0, 0, .3);
  }
}

.card {
  width: 100%;
  border: 1px solid #eeeeee;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px;
  border-radius: 10px;

  .title {
    font-size: 16px;
    color: #000000;
    font-weight: bold;
  }
}

.card-btn {
  display: inline-block;
  width: 300px;
  border-radius: 10px;
  font-size: 20px;
  text-align: center;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, .2);
  cursor: pointer;
}

.card-btn:hover {
  transform: scale(.98);
}

.card-btn:active {
  transform: scale(1)
}

</style>